<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" />

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"> 
  <meta name="”renderer”" content="”webkit”"> 
  <meta http-equiv="”X-UA-Compatible”" content="”IE=Edge,chrome=1″"> 
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
  <title>乐直播-媒体云</title> 
  <link rel="stylesheet" href="http://cdn.lezhibo.com/staticRep/layui/css/layui.css?cdnv=0.16"> 
  <link rel="stylesheet" href="http://cdn.lezhibo.com/static/portal/css/le-main24.css?cdnv=0.16"> 
  <link rel="stylesheet" href="http://cdn.lezhibo.com/static/libs/font-awesome/css/font-awesome.min.css?cdnv=0.16"> 
  <style type="text/css">
    .le-upload-file{
        cursor: pointer;
        height: 100%;
        left: 0;
        opacity: 0;
        overflow: hidden;
        position: absolute;
        top: 0;
        width: 100%;
    }
    .le-video-progress{display:none;}
    .pro h3 span {cursor: pointer;}
    .cloud-img{position: relative;}
    .layui-input{width:93%;}
    .le-video-success{display:none;float:right;}
    .layui-form-item .layui-input-inline{width:210px}
    .le-tips font{font-size:25px}
        </style> 
  <script src="http://cdn.lezhibo.com/static/portal/js/fastclick.js?cdnv=0.16"></script> 
 </head> 
 <body> 
  <div class="le-main"> 
<%@include file="portal_navi.jsp" %>
  </div> 
  <div class="le-content-wrap le-head-content"> 
   <div class="le-sidebar"> 
    <ul class="layui-nav layui-nav-tree"> 
     <li class="layui-nav-item" id="index"><a href="${ctx }/portal/mediacloud.vo"> <i class="fa fa-file-video-o" aria-hidden="true"></i> 视频库</a></li> 
     <li class="layui-nav-item" id="live"><a href="${ctx }/portal/mediacloud/live.vo"> <i class="fa fa-cloud" aria-hidden="true"></i> 直播回看</a></li> 
    </ul> 
   </div> 
   <div class="le-content"> 
    <div class="le-mall-content le-media-sc"> 
     <form class="aa" id="form" action="${ctx }/portal/mediacloud/videoCreate.vo" method="post" enctype="multipart/form-data"> 
      <div class="cloud-img"> 
       <a href="#" style="position:relative;"> <i class="fa fa-cloud-upload" aria-hidden="true"></i> <input validate="video" type="file" name="file" id="le-upload-file" class="le-upload-file" accept=".mp4, .avi, .webm,.mov,.rmvb,.flv,.ts,.vob,.mpg,.wmv,.asf,.mkv,.dv,.trp,.dpg"> </a> 
      </div> 
      <h1>选择视频</h1> 
      <div class="check"> 
       <label> <input type="checkbox" class="choose" value="我已阅读并同意遵守"> 我已阅读并同意遵守 <a href="">乐直播视频上传服务规则</a></label> 
      </div> 
      <ul> 
       <li><a href="">禁止发布的视频内容</a></li> 
       <li><a href="">视频大小</a></li> 
       <li><a href="">视频规格</a></li> 
       <li><a href="">视频时长</a></li> 
       <li><a href="">高清视频</a></li> 
       <li><a href="">视频处理流程</a></li> 
      </ul> 
     </form> 
    </div> 
    <div class="le-mall-content le-media-upload-more le-video-progress"> 
     <div class="upload-more"> 
      <div class="layui-form-item "> 
       <div class="pro"> 
        <h3>乐直播视频 <span>取消上传</span></h3> 
        <div id="loadbar" style="float: left;"> 
         <span id="bar" style="width: 0%;">0%</span> 
        </div> 
        <div class="upload-time"> 
         <span>上传速度:0kb/s</span> 
         <span>已上传:0MB</span> 
         <span>剩余时间:00时00分00秒</span> 
        </div> 
       </div> 
      </div> 
      <form id="contentForm" class="layui-form cloud-form" action="${ctx }/portal/mediacloud/save.vo"> 
       <input type="hidden" name="video" value=""> 
       <input type="hidden" name="status" value="2"> 
       <div class="layui-form-item cloud-form1" style="margin-bottom: 5px"> 
        <label class="layui-form-label"><span style="color:red">*</span>标题:</label> 
        <div class="layui-input-block"> 
         <input type="text" name="title" lay-verify="title" validate="empty" autocomplete="off" placeholder="" class="layui-input"> 
        </div> 
       </div> 
       <div class="tips" style="color: #999;margin-left: 110px;margin-bottom: 15px">
        提示：建议设置10字以内的标题
       </div> 
       <div class="layui-form-item layui-form-text cloud-form2"> 
        <label class="layui-form-label">简介:</label> 
        <div class="layui-input-block"> 
         <textarea placeholder="请输入内容" name="content" class="layui-textarea"></textarea> 
        </div> 
       </div> 
       <div class="layui-form-item cloud-form3"> 
        <div class="layui-input-inline"> 
         <button type="button" class="layui-btn lesaveVideo" onclick="doSubmit('${ctx}/portal/mediacloud.vo')" disabled>保存</button> 
        </div> 
        <div class="layui-input-inline" style="text-align: left;width: auto"> 
         <button type="button" class="layui-btn lesaveVideo" onclick="doSubmit('${ctx}/portal/mediacloud/upload.vo')" disabled>保存并继续上传</button> 
        </div> 
       </div> 
      </form> 
     </div> 
    </div> 
   </div> 
  </div> 
  <script type="text/javascript" src="http://cdn.lezhibo.com/staticRep/layui/layui.js?cdnv=0.16"></script> 
  <script type="text/javascript" src="http://cdn.lezhibo.com/staticRep/layui/lay/dest/layui.all.js?cdnv=0.16"></script> 
  <script type="text/javascript" src="http://cdn.lezhibo.com/static/libs/jquery/jquery.min.js?cdnv=0.16"></script> 
  <script type="text/javascript" src="http://cdn.lezhibo.com/static/libs/jquery/jquery.form.min.js?cdnv=0.16"></script> 
  <script>
            var cdnPath="http://cdn.lezhibo.com";//cdn路径
            function fix() {
                var head_height = $('.le-head').outerHeight();
                var window_height = $(window).height();
                var content_height = $('.le-content').outerHeight();
                var sidebar_height = $(".le-sidebar").height();
                var max_height = window_height - head_height;
                if(content_height < sidebar_height){
                    content_height = sidebar_height;
                }

                if(max_height < content_height){
                    max_height = content_height;
                }

                $(".le-content").css('min-height', max_height);
                $(".le-sidebar").css('min-height', max_height);


//                if (content_height < (window_height - head_height)) {
//                    $(".le-content").css('min-height', window_height - head_height);
//                } else {
//                    $(".le-sidebar").css('min-height', content_height);
//                    sidebar_height = content_height;
//                }
//
//                if (sidebar_height < (window_height - head_height)) {
//                    $(".le-sidebar").css('min-height', window_height - head_height);
//                }
            }

            var globalNeedRefreshIndex = "";
            var globalNeedRefreshUrl = "";
            var needRefresh = false;

            function openLayer(url, title, func, isNeedRefreshThisPage) {
                var index = layer.open({
                    type: 2,
                    title: title,
                    shadeClose: true,
                    shade: 0.6,
                    area: ['60%', '80%'],
                    content: url,
                    end: function () {
                        if (needRefresh) {
                            layer.iframeSrc(globalNeedRefreshIndex, globalNeedRefreshUrl);//刷新第几层
                            needRefresh = false;
                        }

                        if (!(typeof(func) == "undefined")) {
                            eval(func);
                        }
                    }
                });

                if (isNeedRefreshThisPage == true) {
                    globalNeedRefreshIndex = index;
                    globalNeedRefreshUrl = url;
                }

            }

            function layerInit() {
                $("[layer-href]").click(function () {
                    if ("" == $(this).attr("layer-need-record")) {
                        openLayer($(this).attr("layer-href"), $(this).attr("layer-title"), $(this).attr("layer-func"), true);
                    } else {
                        openLayer($(this).attr("layer-href"), $(this).attr("layer-title"), $(this).attr("layer-func"), false);
                    }
                });

                $("[go-href]").click(function () {
                    var href = $(this).attr("go-href");
                    var newWind = $(this).attr("go-href-new");
                    if (newWind == "true") {
                        window.open(href);
                    } else {
                        window.location.href = href;
                    }
                });


                $("[confirm-href]").click(function () {
                    var href = $(this).attr("confirm-href");
                    if ((typeof(href) == "undefined") || href == null || href == "") {
                        return;
                    }

                    var title = $(this).attr("confirm-title");
                    if ((typeof(title) == "undefined") || title == null || title == "") {
                        title = "您确定执行该操作吗？"
                    }
                    layer.confirm(title, {icon: 9, title: '确定操作 ？'}, function (index) {
                                layer.close(index);
                                $.get(href, function (result) {
                                    if (result.isOk) {
                                        location.reload();
                                    } else {
                                        alert(result.message);
                                    }
                                });
                            },
                            function (index) {
                                layer.close(index);
                            });
                });


            }

            function headerFocus() {
                $("#nav-mcloud").addClass("layui-this");
            }


            function initSidebarUrls() {

                $(".le-sidebar").find(".layui-nav-item").each(function () {
                    var pid = $(this).attr("id");
                    if (typeof(pid) == 'undefined' || null == pid) {
                        return;
                    }

                    var href = $(this).children('a').attr("href");
                    if ((typeof(href) != "undefined") && href.indexOf("?") == -1) {
                        href = href + "?p=" + pid;
                    } else {
                        href = href + "&p=" + pid;
                    }
                    $(this).attr("class", "layui-nav-item");
                    $(this).children('a').attr("href", href);
                });

                $("#index").attr("class", "layui-nav-item layui-this");
            }

            var verification = {
                mobiel: function () {
                    $mobile = $("input[validate='mobile']").val();
                    var re = /^1\d{10}$/;
                    if ((typeof($mobile) != "undefined") && !re.test($mobile)) {
                        $("input[validate='mobile']").after('<p class="le-tips"><span style="color: red;width: 100%">请输入正确的手机号</span></p>');
                        return false;
                    }
                },
                email: function () {
                    $email = $("input[validate='email']").val();
                    var re = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
                    if ((typeof($email) != "undefined") && !re.test($email)) {
                        $("input[validate='email']").after('<p class="le-tips"><span style="color: red;width: 100%">请输入正确的邮箱</span></p>');
                        return false;
                    }
                },
                empty: function () {
                    var $input = $("input[validate='empty']");
                    for (var i = 0; i < $input.length; i++) {
                        if ($input.eq(i).val().trim().length == 0) {
                            $("input[validate='empty']").eq(i).after('<p class="le-tips"><span style="color: red;width: 100%">输入不能为空</span></p>');
                            return false;
                        }
                    }

                    var $textarea =$("textarea[validate='empty']");
                    for(var i=0;i<$textarea.length;i++){
                        if($textarea.eq(i).val().trim().length==0){
                            $("textarea[validate='empty']").eq(i).after('<p class="le-tips"><span style="color: red;width: 100%">输入不能为空</span></p>');
                            return false;
                        }
                    }
                },

                password: function () {
                    $password = $("input[validate='password']").val();
                    var re = /(.+){6,12}$/;
                    if ((typeof($password) != "undefined") && !re.test($password)) {
                        $("input[validate='password']").after('<p class="le-tips"><span style="color: red;width: 100%">请输入6到12位密码</span></p>');
                        return false;
                    }
                },
                //正整数
                positiveInteger: function () {
                    $positiveInteger = $("input[validate='positiveInteger']");
                    var re=/^[1-9]\d*|0$/;
                    for (var i = 0; i < $positiveInteger.length; i++) {
                        var every=$positiveInteger.eq(i).val().trim();
                        if ((typeof(every) != "undefined") && !re.test(every)) {
                            $("input[validate='positiveInteger']").eq(i).after('<p class="le-tips"><span style="color: red">请输入一个正整数或者0</span></p>');
                            return false;
                        }
                    }
                },
                decimal: function (value) {
                   $decimal = $("input[validate='decimal']");
                    var re = /^[0-9]+\.{0,1}[0-9]{0,2}$/;
                    for (var i = 0; i < $decimal.length; i++) {
                        var every=$decimal.eq(i).val().trim();
                        if ((typeof(every) != "undefined") && !re.test(every)) {
                            $("input[validate='decimal']").eq(i).after('<p class="le-tips"><span style="color: red">值不能小于0</span></p>');
                            return false;
                        }
                    }
                }
            };


            var regularVerify = {
                mobile: function (value) {
                    var re = /^1\d{10}$/;
                    if ((typeof(value) != "undefined") && !re.test(value)) {
                        return false;
                    }
                },
                email: function (value) {
                    var re = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
                    if ((typeof(value) != "undefined") && !re.test(value)) {
                        return false;
                    }
                },
                password: function (value) {
                    var re = /(.+){6,12}$/;
                    if ((typeof(value) != "undefined") && !re.test(value)) {
                        return false;
                    }
                },
                integer: function (value)     {
//                    var re = /^[1-9]\d*$/;
                    var re = /^\d+$/;
                    if ((typeof(value) != "undefined") && !re.test(value)) {
                        return false;
                    }
                },
                decimal: function (value) {
//                    var re = /^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$/;
                    var re = /^[0-9]+\.{0,1}[0-9]{0,2}$/;
                    if ((typeof(value) != "undefined") && !re.test(value)) {
                        return false;
                    }
                },
                empty: function (value) {
                    if (value.trim().length == 0) {
                        return false;
                    }
                }
            }


            function leSubmit() {
                $("[le-submit]").click(function () {
                    var $form = $(this).parents("form");
                    var sfunc = $form.attr("success-func");
                    var bfunc = $form.attr("before-func");
                    $form.ajaxSubmit({
                        type: "post",
                        dataType: "json",
                        beforeSend: function () {
                            if(bfunc != null){
                                if(false == eval(bfunc)){
                                    return false;
                                }
                            }
                            $(".le-tips").remove();
                            if (false == verification.empty()) {
                                return false;
                            }
                            if (false == verification.mobiel()) {
                                return false;
                            }
                            if (false == verification.email()) {
                                return false;
                            }
                            if (false == verification.password()) {
                                return false;
                            }
                        },
                        success: function (result) {
                            if (sfunc != null) {
                                eval(sfunc);
                                return;
                            }

                            if (result.isOk) {
                                parent.isUpdateData = true;
                                parent.layer.closeAll();
                            } else {
                                alert(result.message);
                            }
                        },
                        error: function () {
                            alert("信息提交错误");
                        }
                    });
                })
            }

            //对日期选择范围的控制
            //对id为begin-date和end-date的日期选择控件进行控制
            function verifyDate() {
                layui.use('laydate', function () {
                    var laydate = layui.laydate;
                    var start = {
                        min: '2006-01-01 00:00:00',
                        max: '2099-06-16 23:59:59',
                        istoday: false,
                        choose: function (datas) {
                            end.min = datas;    //开始日选好后， 重置结束日的最小日期
                            end.start = datas;  //将结束日的初始值设定为开始日
                        }
                    };

                    var end = {
                        min: '2006-01-01 00:00:00',
                        max: '2099-06-16 23:59:59',
                        istoday: false,
                        choose: function (datas) {
                            start.max = datas;  //结束日选好后, 重置开始日的最大日期
                        }
                    };

                    $('.begin-date').click(function () {
                        start.elem = this;
                        laydate(start);
                    });
                    $('.end-date').click(function () {
                        end.elem = this;
                        laydate(end);
                    });

                });
            }

            fix();
            layerInit();
            headerFocus();
            initSidebarUrls();
            leSubmit();
            verifyDate();


//<script>
    // Figure out what browser is being used
    var userAgent = navigator.userAgent.toLowerCase();
    jQuery.browser = {
        version: (userAgent.match(/.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/) || [])[1],
        safari: /webkit/.test(userAgent),
        opera: /opera/.test(userAgent),
        msie: /msie/.test(userAgent) && !/opera/.test(userAgent),
        mozilla: /mozilla/.test(userAgent) && !/(compatible|webkit)/.test(userAgent)
    };

    //选择上传文件
    $(function () {
        $(".le-upload-file").change(function () {
            var fileName = "";
            var filePath = $("#le-upload-file").val();   //C:\fakepath\demo.mp4 (桌面上的视频文件)
            var arr = filePath.split('\\');  // 转为数组 "0":"C:"1:"fakepath"2:"demo.mp4"
            var fileFullName = arr[arr.length - 1]; //视频名称:demo.mp4
            var lastNum = fileFullName.lastIndexOf(".");
            fileName = fileFullName.substring(0, lastNum);  //demo
            var fileType = fileFullName.substring(lastNum + 1, fileFullName.length);    //mp4
            $.ajax({
                type: 'POST',
                url: "/portal/mediacloud/videoCreate",
                beforeSend: function () {
                    //检测用户是否同意上传服务规则
                    if ($(".choose")[0].checked == false) {
                        if ($.browser.msie) {    // 此处判断是否是IE
                            $(".le-upload-file").replaceWith($(".le-upload-file").clone(true));
                        } else {
                            $(".le-upload-file").val('');
                        }
                        alert("请阅读并同意遵守 乐直播视频上传服务规则");
                        return false;
                    }

                    $("pro h3").html(fileName);

                },
                data: {"videoName": fileName},
                success: function (result) { //提交成功的回调函数
                    if (result.isOk) {
                        $("input[name='video']").val(result.object.id); //video 的 id
                        isStartLoad = false;
                        $("input[name='title']").val(fileName);//标题名字
                        uploadProgessVideo(fileName, result.object.cloud_upload_url);
                    }
                },
                error: function () {
                    alert("信息提交错误");
                }
            });
        });
        var last = 0;//上一个数
        function showPregress(fileName, url, e) {
            $(".le-media-sc").hide();
            $(".le-video-progress").show();
            $(".lesaveVideo").css("background-color", "#dddddd;").attr("disabled", true);
            var percent = "0%";
            if (e.total > 0) {
                percent = Math.round(e.loaded / e.total * 10000) / 100.00 + "%";
            }
            var unit = "KB/S";
            var speed = parseInt((e.loaded - last) / 1024);
            if (speed > 1024) {
                speed = speed / 1024;
                speed = speed.toFixed(2);
                unit = "MB/S";
            }
            var totelsecond = (e.total - e.loaded) / (e.loaded - last);
            var second = Math.floor(totelsecond % 60);             // 计算秒
            var minite = Math.floor((totelsecond / 60) % 60);      //计算分
            var hour = Math.floor(((totelsecond / 60) / 60) % 60);      //计算时

            var html = "";
            html += '<h3>' + fileName + '<span onclick="uploadCancel()">取消上传</span></h3>';
            html += '<div id="loadbar" style="float:left;"><span id="bar" style="width:' + percent + ';">' + percent + '</span></div>';
            html += '<div class="le-video-success"><span>完成上传</span></div>';
            html += '<div class="upload-time"><span>上传速度:' + speed + unit + '</span>';
            html += '<span>已上传:' + parseInt(e.loaded / 1048576) + 'MB</span>';
            html += '<span>剩余时间:';
            if (hour > 0) {
                html += hour + '时' + minite + '分' + second + '秒';
            } else if (minite > 0) {
                html += minite + '分' + second + '秒';
            } else {
                html += second + '秒';
            }
            html += '</span></div>';
            $(".pro").html(html);
            //  $("input[name='title']").val(fileName);
            last = e.loaded;

            //判断是否完成加载
            if (percent == "100%") {
                $(".le-video-success").show();
                $("#bar").css("width", "100%").html('100%');
                $(".lesaveVideo").css({"background-color": "#009688", "color": "white"}).attr("disabled", false);
            } else {
                flag = true;
            }
        }

        var flag = true; //判断刷新
        function uploadProgessVideo(fileName, url) {
            //  var url = $("#form").attr("action");
            var pic = $("#le-upload-file").get(0).files[0];
            var formData = new FormData();
            formData.append("file", pic);
            $.ajax({
                url: url,
                type: 'POST',
                data: formData,
                processData: false,
                //必须false才会自动加上正确的Content-Type
                contentType: false,
                xhr: xhrOnProgress(function (e) {
                    var percent = e.loaded / e.total;//计算百分比
                    if (percent == 1) {
                        flag = false;
                        setTimeout(showPregress, 1000, fileName, url, e);
                    }
                    if (flag) {
                        flag = false;
                        setTimeout(showPregress, 1000, fileName, url, e);
                    }
                })
            });
        }

        var xhrOnProgress = function (fun) {
            xhrOnProgress.onprogress = fun; //绑定监听 //使用闭包实现监听绑
            return function () { //通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
                var xhr = $.ajaxSettings.xhr(); //判断监听函数是否为函数
                if (typeof xhrOnProgress.onprogress !== 'function') {
                    return xhr;
                }
                //如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
                if (xhrOnProgress.onprogress && xhr.upload) {
                    xhr.upload.onprogress = xhrOnProgress.onprogress;
                }
                return xhr;
            }
        }

    })


    function uploadCancel() {
        var msg = "确定要取消上传吗？"
        if (confirm(msg) == true) {
            location.href = "/portal/mediacloud/upload";
        }
    }
    $("#le-upload-file").mouseover(function () {
        $(".fa-cloud-upload").css("color", "#017e66");
    }).mouseout(function () {
        $(".fa-cloud-upload").css("color", "#333");
    })

    function doSubmit(url) {
        $("#contentForm").ajaxSubmit({
            type: "post", //提交方式
            dataType: "json", //数据类型
            beforeSubmit: function () {
                if ($("input[type=text][name=title]").val().trim().length == 0) {
                    alert("标题不能为空！");
                    return false;
                }
            },
            success: function (result) { //提交成功的回调函数
                if (result.isOk) {
                    if (url != null && '' != url) {
                        location.href = url;
                    } else {
                        location.reload();
                    }
                } else {
                    alert(result.message);
                }
            },
            error: function () {
                alert("信息提交错误");
            }
        });
    }
    //</script>    
 </body>
</html>